<template>
  <view class="notice-page">
    <!-- 顶部导航栏 -->
   <view class="custom-nav" :style="{ paddingTop: statusBarHeight + 'px' }">
     <view class="nav-content">
   		 <view class="left-area" @click="goBack">
   		   <text class="iconfont icon-more trasnicon" @click="goBack"></text>
   		   <text class="nav-title">公告详情</text>
   		 </view>
     </view>
   </view>
   <view class="" :style="{ paddingTop: navHeight + 'px' }"></view>
    
    <!-- 公告内容卡片 -->
    <view class="notice-card">
      <view class="notice-title-box"><text class="notice-title">严重违反平台使用规则，顾客投诉请即时处理！</text></view>
      
      <!-- 图片容器 -->
      <!-- <view class="notice-image">
        <image src="/static/img/banner_01.png" mode="aspectFill"></image>
      </view> -->
      
      <!-- 公告内容 -->
      <view class="notice-content">
        <text class="content-text">{{noticeContent}}</text>
      </view>
      <view class="detail">
      	    <text>xx市开发管理有限公司</text>
			<text>20xx年xx月xx日</text>
      </view>
	  
      <!-- 时间戳 -->
      <view class="notice-time">
        <text>1月6日 18：44</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 0,
      navHeight: 0,
      noticeContent:'xx市开发管理有限公司关于员工予以警告处分的通知根据《公司考核制度》，员工今年至今为止已累计扣除考核分10分，现予以警告处分。根据公司规定，如若考核分扣分达10分以上，将给予开除的处理。为进一步加强工作纪律管理，提高工作效率，现就加强管理、严明工作纪律的`有关规定通告如下:        一、严格作息时间。按时上下班，不得迟到、早退、旷工;上班时间必须坚守岗位不得中途脱岗，严格执行考勤制度。        二、加强工作纪律。自觉遵守各项工作纪律，严禁在上班时间，处理私人事务。严禁擅离职守，严禁利用办公电脑上网聊天、玩电脑游戏、看电影、听音乐。严格执行请销假制度，按规定程序办理。希望公司全体员工高度重视，自觉维护规章制度的严性，公司将组织进行抽查和暗访，发现违纪员工将严肃处理，'
    }
  },
  onLoad() {
    const systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = systemInfo.statusBarHeight
    this.navHeight = systemInfo.statusBarHeight + 44
  },
  methods: {
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss">
.notice-page {
  min-height: 100vh;
  background-color: #f3f3f3;
  .custom-nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 999;
  background: url('../../static/background.jpg');      .trasnicon{
    	  transform: rotate(180deg);
      }
    	
    	
      .nav-content {
  		height: 44px;
  		display: flex;
  		align-items: center;
  		justify-content: space-between;
  		padding: 0 12px;
  		background: transparent;
  		
  		.left-area {
  		  display: flex;
  		  align-items: center;
  		  
  		  .iconfont {
  			font-size: 16px;
  			color: #333;
  			margin-right: 8px;
  		  }
  		  
  		  .nav-title {
  			font-size: 16px;
  			color: #333;
  			font-weight: 500;
  		  }
  		}
    	
    	
      }
    }
  .notice-card {
	  width: 94%;
	  margin: 5rpx auto;
    background: #ffffff;
    border-radius: 12rpx;
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.16); 
	padding: 20rpx;
    .notice-title-box {
      font-size: 28rpx;
      font-weight: 500;
      color: #000000;
	  margin-bottom: 30rpx;
	  margin-top: 10rpx;
    }
    
    .notice-image {
      width: 100%;
      height: 280rpx;
      overflow: hidden;
      
      image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .notice-content {
      font-size: 14px;
      color: #333;
	  margin: 30rpx 0;
	  max-height: 50vh;
	  overflow-y: scroll;
	  .content-text{
		  font-size: 24rpx;
		  font-weight: 500;
		  color: #000000;
		  line-height: 30rpx;
	  }
    }
    .detail{
		margin:33rpx 0 122rpx 0;
		text-align: right;
		display: flex;
		flex-direction: column;
		
		font-size: 20.93rpx;
		font-family: Microsoft JhengHei UI, Microsoft JhengHei UI-Bold;
		font-weight: 700;
		text-align: right;
		color: #000000;
	}
    .notice-time {
      font-size: 12px;
      font-weight: 500;
      text-align: right;
      color: #afafaf;
	  padding-right: 10rpx;
	  margin-bottom: 10rpx;
    }
  }
}
</style> 